<template>
  <div class="home-container">


   <el-row :gutter="40">
     <!--        左侧辅助列-->
<!--     用户简要信息-->
     <el-col :span="6">
       <el-card shadow="never" >
         <div v-if="user.id!=0" style="text-align: center;">

           <el-image style="width: 200px;border-radius: 200px"  :src="user.avatar"></el-image>
           <p style="margin-top:20px;font-size: 20px;font-weight: bolder;letter-spacing: 1px;"> {{user.nickName}}</p>

         </div>
<!--         未登录展示-->
         <div v-else>
           <p style="margin-bottom:10px;text-align:center;font-size: 18px;font-family: handWrite;">登录展示个人简介</p>
           <el-divider></el-divider>
           <el-image  :src="userImg" ></el-image>
         </div>

       </el-card>

       <el-card style="margin-top: 20px" shadow="never" >
         <div slot="header" style="text-align: center;font-family: handWrite;font-size: 18px;" >
           热门阅读
         </div>
<!--         引入组件,统计文章数据-->
         <articleCom v-if="true"></articleCom>

         <el-image v-else  :src="userImg"></el-image>

       </el-card>
     </el-col>

<!--     文章-->
     <el-col :span="18">
       <el-card shadow="never" class="hotArticle-card">
         <el-row >
           <!--        hotArticle-->
           <el-col :span="24">
             <el-card shadow="never" style="border: none">
               <div slot="header" >
                 <!--              分类nav-->
                 <span style="font-size: 20px;font-family: fzBlack;letter-spacing: 1px;font-weight: bolder;">
                  <i class="el-icon-s-management"></i> 推荐文章
                 </span>
                 <el-button type="text" style="float:right;color:black;" @click="handleArticle">更多>></el-button>
               </div>

               <!--            文章列表-->
               <el-row v-for="item in articleList" :key="item.id">
                 <el-col :span="24">
                   <p class="article-title" @click="handleDetail(item.id)">{{item.title}}</p>
                   <p style="margin-top: 10px;font-size: 15px;color: gray;">
                     <i  class=" el-icon-notebook-1" ></i>
                     {{item.categoryName}}

                     <i style="margin-left: 20px;" class=" el-icon-time" ></i>
                     <span style="margin-left: 10px;">{{item.createTime}}</span>
                   </p>
<!--文章概要-->
                   <el-row style="margin-top:10px;">
                     <el-col :span="6">
                       <el-image style="width: 200px" :src="item.thumbnail"></el-image>
                     </el-col>
                     <el-col :span="18" style="font-family:fzBlack; font-size:15px;letter-spacing: 1px;line-height: 25px;color:gray;">
                       {{item.summary}}
                     </el-col>
                   </el-row>
                   <el-divider></el-divider>
                 </el-col>
               </el-row>
             </el-card>
           </el-col>
         </el-row>
       </el-card>
     </el-col>

   </el-row>



  </div>
</template>

<script>

import { reqHotArticle, reqUserInfo} from "@/API";
import articleCom from "@/pages/home/components/article";

export default {
  name: 'HomeCom',
  components:{
    articleCom
  },
  data(){
    return {
      //img
      userImg:require("@/assets/img/userImg.png"),
      categoryList:12,
      showFlag:false,
      activeIndex: "2",
      //用户信息
      user:{
        id:0,
        nickName:"",
        avatar:"",
        sex:"",
        email:""
      },
      //文章分页信息
      pageNum:1,
      pageSize:6,
      //文章列表对象
      articleList:[
        {
          categoryName:'',
          id:0,
          likeCount:0,
          summary:'',
          thumbnail:'',
          title:'',
          viewCount:'',
          createTime:''
        }
      ],
      articleTotal:0

    }
  },
  created() {
    //token清除
    window.onload = function () {
      let lastTime = localStorage.getItem("lastTime");
      const interval = 3 * 1000;
      // 如果没有上一次离开的时间或者时间间隔大于3s，就清除token
      if (!lastTime || new Date().getTime() - lastTime > interval) {
        localStorage.removeItem("pole_item_info");
        // console.log("清除token")
      }else{
        // console.log("时间过短不清除token")
      }
    };
    window.onunload = function () {
      localStorage.setItem("lastTime", new Date().getTime());
    };

    //获取用户信息
    if(localStorage.getItem("pole_item_info")===null){
      this.getUserInfo()
    }else{
      this.user = JSON.parse(localStorage.getItem("pole_item_info"))
    }


    //获取文章信息
    this.getUserArticle()

  },
  methods:{

    //跳转全部文章
    handleArticle(){


      this.$router.push({
        path:"/article"
      })
    },
    //跳转文章详情
    handleDetail(id){
      //写入local storage articleId
      localStorage.setItem("articleId",id)
      this.$router.push({
        path:"/articleDetail"
      })

    },
    //文章信息
    getUserArticle(){
      // let params = {
      //   pageNum:this.pageNum,
      //   pageSize:this.pageSize
      // }

      reqHotArticle().then((res) =>{
        if(res.status === 200){
          this.articleList = res.data

          // console.log(this.articleList)
        }
      })
    },
    //用户信息
    getUserInfo(){
      reqUserInfo().then((res) =>{
        if(res.status === 200){
          this.user = res.data
        }
      })
    },

    showAll(){
      if(this.showFlag){
        this.categoryList = 12
        this.showFlag = !this.showFlag
      } else{
        this.categoryList = 20
        this.showFlag = !this.showFlag
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

/*font*/
@font-face {
  font-family: 'handWrite';
  src: url("@/assets/font/handWrite.ttf");
}
@font-face {
  font-family: 'fzBlack';
  src: url("@/assets/font/fzBlack.ttf");
}
.home-container{
  margin:10px auto;
  width:90%;
}
.article-title{
  color:black;
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 1px;
}
.article-title:hover{
  cursor: pointer;
  color:#1bb6e2;
}


</style>
